<template>
  <div style="height: 765px;"><!--border: 1px solid blue;margin: -20px-->

    <el-row :gutter="0" style="border: 1px solid white;">
      <el-col :span="24" :offset="0" style="height: 200px">

        <el-carousel :interval="5000" arrow="always" >
          <el-carousel-item v-for="item in 4" :key="item" style="height: 200px">
            <h3>{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>

      </el-col>
    </el-row>

    <el-row :gutter="0" style="border: 1px solid white;margin-top: 20px" >
      <el-col :span="24" :offset="0">

        <el-card class="box-card" style="">
          <div style="line-height: 15px;font-size: 15px">{{username}}，你可以借</div>
          <div style="line-height: 20px"><h1>{{ availableCredit }}</h1></div>
          <div style="line-height: 15px;font-size: 15px;margin-bottom: 30px">总额度{{totalAmount}}元，日利率<span style="color: red">{{dayRate}}</span></div>
          <el-button type="primary" style="width: 150px"  @click="fun1">提升额度</el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="success" style="width: 150px" @click="fun2">去借钱</el-button>
        </el-card>

      </el-col>
    </el-row>


    <el-card class="box-card" style="margin-top:20px;text-align: left">
      <div slot="header" class="clearfix" style="line-height: 15px">
        <span>微贷新手攻略</span>
      </div>
      <div style="line-height: 15px;font-size: 15px">额度不够用吗？来看看微贷提额攻略</div>
      <div style="line-height: 20px">包括：多用支付宝，多用借呗且不逾期等>></div>
      <el-button type="primary" plain size="mini" style="">去看看</el-button>
    </el-card>


  </div>
</template>

<script>
    export default {
      name: "borrow",
      data() {
        return {
          username: '小宋',
          availableCredit: '12000.00',
          totalAmount: '20000',
          dayRate:'万6'
        };
      },
      methods: {
        fun1:function () {
          this.$router.push("/increaseQuota")
        },
        fun2:function () {
          this.$router.push("/borrowReal")
        }
      },
      mounted:{

      }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;

  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
